<template>
  <div class="contains">

    <div class="types">
      <div class="type" v-for="item of types" :key="item.img">
        <img :src="item.img" class="img"/>
        <div class="text">{{item.text}}</div>
      </div>
    </div>

    <div class="types">
      <div class="type bottom" v-for="item of items" :key="item.img">
        <img :src="item.img" class="img_small"/>
        <div class="text">{{item.text}}</div>
      </div>
    </div>


  </div>
</template>

<script>
  export default {
    name: 'Home',
    computed: {
      items () {
        return this.types.concat(this.types).concat(this.types)
      }
    },
    data () {
      return {
        types: [
          {
            img: "https://s.qunarzz.com/homenode/images/touchheader/hotel.png",
            text: "酒店"
          },
          {
            img: "https://s.qunarzz.com/homenode/images/touchheader/flight.png",
            text: "机票"
          },
          {
            img: "https://s.qunarzz.com/homenode/images/touchheader/package.png",
            text: "度假"
          },
          {
            img: "https://s.qunarzz.com/homenode/images/touchheader/train.png",
            text: "火车票"
          },
          {
            img: "https://s.qunarzz.com/homenode/images/touchheader/piao.png",
            text: "景点门票"
          },
        ]
      }
    }
  }
</script>

<style lang="stylus" type="text/stylus" rel="stylesheet/stylus" scoped>
  @import '~styles/varibles.styl'
  @import '~styles/mixins.styl'
  /*.icons >>> .swiper-container*/

  .types {
    display flex
    padding 0.1rem
    flex-wrap wrap

    .bottom {
      margin-bottom 0.1rem
    }

    .type {
      flex-basis 20%
      display flex
      align-items center
      flex-direction column

      .img {
        width 0.5rem
        height 0.5rem
      }

      .img_small {
        width 0.35rem
        height 0.35rem
      }

      .text {
        margin-top 0.08rem
      }
    }


  }
</style>
